<template>
	<view class="">
		<view class="topLevel relative">
			<image class="imgGrade z-index10" :src="resources.jfbg" mode=""></image>
			<view class="relative z-index20 pL20 pT20">
				<view class="font15 u-3 bold">
					我的积分
				</view>
				<view class="font30 mT5 u-3 flex alg-center">
					<view class="bold">{{gradeTotal}}</view>
					<view class="font13 u-6 pL10">今日积分:</view>
					<view class="bold font13">{{dayGrade}}</view>
				</view>
			</view>
			<view class="jf-title">积分明细</view>
		</view>
		<view class="bg-error radius50 pL15 pR15 relative z-index20">
			<mescroll-uni class="lisBox" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" :up="upOption" :bottombar="false" :top="300">
				<view class="pL15 pR15">
					<view class="flex alg-center jst-between u-border-bottom pT10 pB10" v-for="(item,i) in list" :key="i">
						<view class="font15">
							<view>{{item.source}}</view>
							<view class="font13 u-8bd mT5">{{item.createTime}}</view>
						</view>
						<view class="font20"><text v-if="item.branch>0">+</text>{{item.branch}}</view>
					</view>
				</view>
			</mescroll-uni>

		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {getGrade} from "@/api/userInterface/user.js"
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				downOption: {
					use: true,
					auto: false
				},
				upOption: {
					page: {
						num: 0,
						size: 10,
						time: null
					},
					empty: {
						use: true,
						icon: '/static/image/nodata.png',
						tip: "暂无数据",
						fixed: true
					},
					textNoMore: "到底啦~",
				},
				gradeTotal:0,
				dayGrade:0,
				list: [],
			}
		},
		methods: {
			async upCallback(page) {
				if (page.num == 1) this.list = [];
				getGrade({pageSize:15,pageNo:page.num}).then(res=>{
					this.gradeTotal=res.result.creditCount;
					this.dayGrade=res.result.creditDayCount
					let list = res.result.pageList.records;
					this.list = this.list.concat(list);
					this.mescroll.endSuccess(res.result.records.length);
				}).catch(err => {
					this.mescroll.endByPage(0, 0);
					this.mescroll.endSuccess(1);
					this.mescroll.endErr();
				})
				this.mescroll.endSuccess(1);
			},
			getGradeInfo(){
				
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.topLevel {
		height: 289rpx;
		.jf-title{
			position: absolute;
			bottom: 12rpx;
			left: 40rpx;
			z-index: 20;
		}
		.imgGrade {
			width: 100%;
			height: 100%;
			position: absolute;
		}
	}
</style>